<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //修改对象属性值，将属性值同步更改对应表单内容
        //更改表单内容，将表单内容同步更改对象属性
        function initForm(id){
            let inputEleArray=document.querySelectorAll(`#${id} input`);
            //目标对象
            let obj={};
            // console.log(inputEle);
            //修改对象属性值，将属性值同步更改对应表单内容
            inputEleArray.forEach(val=>{
                // console.log(val);
                if(val.type=='text' || val.type=='password'){
                    // console.log(val);
                    //获取name属性值
                    let nameAttr=val.name;
                    Object.defineProperty(obj,nameAttr,{
                        set:function(v){
                            //存储赋值内容到对象属性中
                            obj[`_${nameAttr}`]=v;
                            //更改值同步到表单内容中
                            val.value=v;
                        },
                        get:function(){
                            return obj[`_${nameAttr}`];
                        }
                    })
                }
            });

            //更改表单内容，将表单内容同步更改对象属性
            let formEle=document.querySelector(`#${id}`);
            formEle.onchange=function(event){
                // console.log(event.target);
                // console.log(event.target.value);
                let target=event.target;
                obj[`_${target.name}`]=event.target.value;
            }
            return obj;
        }

        // let o;
        window.onload=function(){
            let o=initForm('myForm');
            // o.acc='admin';
            // o.pwd='123456';
            // o.tel='13566668888';

            document.querySelector('#myForm').onsubmit=function(event){
                event.preventDefault();
                console.log(o.acc);
                console.log(o.pwd);
                console.log(o.tel);
            }
        }
    </script>
</head>
<body>
    <form action="" id="myForm">
        <input type="text" name="acc">
        <input type="password" name="pwd">
        <input type="text" name="tel">

        <input type="submit">
    </form>
</body>
</html>